<template>
  <div class="menu">
    <scroll class="menu_scroll" ref="scroll">
      <ul class="container">
        <li
          class="list"
          :class="{ active: index == currentIndex }"
          v-for="(item, index) in menuList"
          :key="index"
          @click="itemClick(index)"
        >
          <span>{{ item.name }}</span>
          <i class="num" v-if="menuNum[index] && menuNum[index] !== 0">
            {{ menuNum[index] }}
          </i>
        </li>
      </ul>
    </scroll>
    <!-- 食品列表组件 -->
    <food-list
      :foodList="foodList"
      :menuIndex="menuIndex"
      @scroll="scroll"
      ref="foodListRef"
    />
    <!-- 底部组件 -->
    <settlement :cartList="cartFoodList" :totalPrice="totalPrice" />
    <transition name="loading">
      <loading v-if="showLoading" />
    </transition>
  </div>
</template>

<script>
import Scroll from '@/components/common/scroll/Scroll';
import Loading from '@/components/common/loading/Loading';
import FoodList from './children/FoodList';
import Settlement from './children/Settlement';

import { mapState, mapMutations } from 'vuex';
import { foodMenuList } from '@/network/getData';

export default {
  data() {
    return {
      menuList: [], // 菜单列表
      foodList: [], // 食品列表
      showLoading: true, // 加载中
      scrollY: 0, // 滚动的位置
      menuIndex: 0, // 菜单索引
      menuNum: [], // 菜单中选择的食品数量
      totalPrice: 0, // 总价格
      cartFoodList: [] // 购物车食品列表
    };
  },
  created() {
    this.initData();
    this.INIT_CART();
  },
  components: {
    Scroll,
    Settlement,
    FoodList,
    Loading
  },
  computed: {
    ...mapState(['cartList', 'shop_id']),
    // 滚动后的正确索引
    currentIndex() {
      if (this.$refs.foodListRef) {
        const tops = this.$refs.foodListRef.tops;
        const index = tops.findIndex((item, index) => {
          return this.scrollY >= item && this.scrollY < tops[index + 1];
        });
        return index;
      }
      return 0;
    }
  },
  methods: {
    ...mapMutations(['INIT_CART']),
    // 获取店铺食品列表
    async initData() {
      const menu = await foodMenuList(this.shop_id);
      menu.data.forEach(item => {
        const food = {
          name: item.name,
          children: [...item.food]
        };
        this.foodList.push(food);
      });
      this.menuList = menu.data;
      this.initCart();
      this.$nextTick(() => {
        this.$refs.scroll.refresh();
      });
      this.showLoading = false;
    },
    // 获取购物车食品列表、菜单选择的数量、总价格
    initCart() {
      const arr = [];
      let cartNum = 0;
      this.totalPrice = 0;
      this.cartFoodList = [];
      const shopCart = this.cartList[this.shop_id];
      // 从店铺开始一层一层的查询
      this.menuList.forEach((menu, index) => {
        if (shopCart && shopCart[menu.id]) {
          let num = 0;
          Object.keys(shopCart[menu.id]).forEach(food_id => {
            Object.keys(shopCart[menu.id][food_id]).forEach(specs_id => {
              const foodItem = shopCart[menu.id][food_id][specs_id];
              num += foodItem.num;
              this.totalPrice += foodItem.num * foodItem.price;
              if (foodItem.num > 0) {
                Object.assign(foodItem, {
                  shop_id: menu.shop_id,
                  menu_id: menu.id,
                  id: parseInt(food_id)
                });
                this.cartFoodList[cartNum] = foodItem;
                cartNum++;
              }
            });
          });
          arr[index] = num;
        } else {
          arr[index] = 0;
        }
      });
      this.menuNum = arr;
    },
    itemClick(index) {
      this.menuIndex = index;
    },
    scroll(position) {
      this.scrollY = Math.abs(position.y);
    }
  },
  watch: {
    // 当购物车发生变化时重新计算
    cartList() {
      this.initCart();
    }
  }
};
</script>

<style lang="less" scoped>
.menu {
  width: 100%;
  display: flex;
  .list {
    position: relative;
    width: 80px;
    padding: 10px;
    text-align: center;
    font-size: var(--font-min);
    background-color: #eee;
  }
  li.active {
    color: var(--color-base);
    background-color: #fff;
  }
  .menu_scroll {
    min-width: 80px;
    height: calc(100vh - 265px);
    overflow: hidden;
  }
  .num {
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    background-color: red;
  }
}
</style>
